<template>
  <view class="pre" v-if="!loading">
    <view class="pre-header">
      <view class="pre-banner" :style="'background-image: url('+ currentItem.cover +')'"></view>
      <view class="pre-cover">
        <image :src="currentItem.cover"></image>
        <view class="pre-title">{{ currentItem.title }}</view>
      </view>
    </view>
    <view class="pre-desc">
      <view class="pre-hd">{{ $t("preivew.intro") }}</view>
      <view class="pre-desc-text">
        {{ currentItem.desc }}
      </view>
    </view>
    <view class="pre-pics">
      <view class="pre-hd">{{ $t("preivew.pics") }}</view>
      <view class="pre-pics-list">
        <image v-for="(picItem, index) in currentItem.pics" :src="picItem" :key="index" />
      </view>
    </view>
    <view class="pre-footer">
      <view class="pre-f-icon"></view>
      <view class="pre-f-btn" @click="goDetail(currentItem.id, currentItem.title)">
        <image src="@/static/img/preview/i_play.png" />
        <text class="ft16 cl-w">{{ $t("preivew.btn.title") }}</text>
      </view>
      <view class="pre-f-tips">
        <image src="@/static/img/preview/i_go.png"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        currentItem: null,
        loading: true,
      }
    },
    onLoad(e) {
      uni.showLoading()
      const that = this
      uni.request({
        url: this.configs.staticUrl + 'preview/config.json?' + new Date().valueOf(),
        method: 'GET',
        success (res) {
          const _data = res.data.list
          if (e.vid) {
            that.currentItem = _data.find(item=>item.id==~~e.vid)
          } else {
            that.currentItem = _data[0]
          }
          uni.setNavigationBarTitle({
            title: that.currentItem.title
          })
          
        },
        fail () {
          that.currentItem = {
            "id": 79,
            "title": "重生之：霍夫人的華麗逆襲",
            "cover": "https://m.playlet.mobi/img/preview/79_cover.png",
            "desc": "前世，沈梔被豬油蒙了心，輕信渣男，落得慘死的下場。重活一世，她踢飛渣男，抱緊自家老公的大腿。",
            "pics": [
              "https://m.playlet.mobi/img/preview/79_1.png",
              "https://m.playlet.mobi/img/preview/79_2.png",
              "https://m.playlet.mobi/img/preview/79_3.png"
            ]
          }
        },
        complete() {
          that.loading = false;
          uni.hideLoading()
        }
      })
    },
    methods: {
      goDetail (vid, title) {
        const that = this
        // 记录点击立即查看
        uni.request({
          url: that.configs.apiUrl + '/api/video/pageNeedlogin',
          data: {
            'vid': vid,
            'mid': 0,
            'title': title,
            'guest_id': uni.getStorageSync('guestId')
          },
          complete() {
            uni.redirectTo({
              url: `/pages/client/tuan/detail?vid=${vid}&mid=0&r=preview`
            })
            
            that.GAHandle('preview_go', vid)
          }
        })
      },
      // countView () {
      //   uni.request({
      //     url: this.configs.apiUrl + '/api/index/planUv',
      //     data: requestData,
      //     success() {
      //       const now = new Date();
      //       const today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
      //       uni.setStorageSync('lastReportDate', today);
      //     }
      //   })
      // }
    }
  }
</script>

<style lang="less">
.pre {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-direction: column;
}
.pre-header {
  width: 100%;
  flex-grow: 1;
  height: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.pre-cover {
  position: relative;
  height: 160rpx;
  display: flex;
  image {
    position: absolute;
    width: 228rpx;
    height: 302rpx;
    border-radius: 12px;
    left: 32rpx;
    top: -80%;
    background: url(<path-to-image>), lightgray 50% / cover no-repeat;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.20);
  }
}

.pre-banner {
  flex-grow: 1;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat;
  filter: blur(6rpx);
  background-position: 30% 20%;
}

.pre-title {
  color: #000;
  font-size: 48rpx;
  font-weight: 600;
  line-height: 64rpx;
  padding: 30rpx 70rpx 0 300rpx;
}

.pre-footer {
  margin: 0 32rpx;
  position: relative;
  margin-bottom: 50rpx;
}
.pre-f-btn {
  display: flex;
  margin: 0 auto;
  width: 90vw;
  height: 96rpx;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 100px;
  background: linear-gradient(180deg, #FFA22A 0%, #F0420F 100%);
  image {
    height: 40rpx;
    width: 40rpx;
  }
}

.pre-desc {
  margin: 64rpx 32rpx 24rpx;
  .pre-desc-text {
    font-size: 28rpx;
    color: #444351;
    line-height: 40rpx;
  }
}

.pre-pics {
  margin: 18rpx 32rpx 48rpx;
  .pre-pics-list {
    display: flex;
    justify-content: space-between;
    image {
      width: 212rpx;
      height: 282rpx;
    }
  }
}

.pre-hd {
  height: 32rpx;
  border-left: 8rpx solid #FE6B00;
  font-size: 32rpx;
  font-weight: 600;
  line-height: 32rpx;
  padding-left: 20rpx;
  margin-bottom: 24rpx;
}

.pre-f-tips {
  position: absolute;
  left: 50%;
  margin-left: -49rpx;
  top: -200rpx;
  width: 98rpx;
  height: 212rpx;
  image {
    width: 100%;
    height: 100%;
  }
  animation: tips 1s linear infinite;
}

@keyframes tips {
  0% {top: -260rpx}
  50% {top: -200rpx}
  100% {top: -260rpx}
}

</style>